<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
	<title>Star Rating widget Demo3 Page</title>
	
	<!-- Demo page css --> 
	<link rel="stylesheet" type="text/css" media="screen" href="css/demos.css?b38"/>

	<!-- Uni-Form style sheet --> 
	<style type="text/css" media="screen"> 
		@import "css/uni-form.css?b38"; 
	</style>
	<!--[if lte ie 7]>
	<style type="text/css" media="screen">
		.uniForm, .uniForm fieldset, .uniForm .ctrlHolder, .uniForm .formHint, .uniForm .buttonHolder, .uniForm .ctrlHolder .multiField, .uniForm .inlineLabel{ zoom:1; }
		.uniForm .inlineLabels label, .uniForm .inlineLabels .label, .uniForm .blockLabels label, .uniForm .blockLabels .label, .uniForm .inlineLabel span{ padding-bottom: .2em; }
		.uniForm .inlineLabel input, .uniForm .inlineLabels .inlineLabel input, .uniForm .blockLabels .inlineLabel input{ margin-top: -.3em; }
	</style>
	<![endif]-->

	<!-- Demo page js -->
	<script type="text/javascript" src="js/jquery.min.js?v=1.4.2"></script>
	<script type="text/javascript" src="js/jquery-ui.custom.min.js?v=1.8"></script>
	<script type="text/javascript" src="js/jquery.uni-form.js?v=1.3"></script>
	
	<!-- Star Rating widget stuff here... -->
	<script type="text/javascript" src="js/jquery.ui.stars.js?v=3.0.0b38"></script>
	<link rel="stylesheet" type="text/css" href="css/crystal-stars.css?v=2.0.3b38"/>
	<script type="text/javascript">
		$(function(){
			$("#starify").children().not(":input").hide();
			
			// Create stars from :radio boxes
			$("#starify").stars({
				disableValue: false
			});
		});
	</script>


</head>

<body>


	<div class="pageDesc">
		<p>
			Integrating Stars with other FORM elements
		</p>
		<p>		
			NOTE: Callback function isn't used in this example, since the Stars selection is sent as a hidden input on FORM submission. Also the <a href="css/jquery.ui.stars.css">default CSS file</a> was replaced with a <a href="css/crystal-stars.css">new one</a>
		</p>
	</div>


	<form class="uniForm" action="demo3.php" method="post">

		<fieldset class="inlineLabels">
			
			<legend>
				Contact form (<a href="demo3a.html?b38" class="">before</a>|<a href="demo3b.html?b38" class="">after1</a>|<a href="demo3c.html?b38" class="">after2</a>|<a href="demo3d.html?b38" class="unlink">after3</a>)
			</legend>


			<div class="ctrlHolder">
				<label for="name"><em>*</em> Your Name</label>
				<input name="name" id="name" value="John Doe" type="text" class="textInput" />
			</div>

			<div class="ctrlHolder">
				<label for="email"><em>*</em> Email address</label>
				<input name="email" id="email" value="email@example.com" type="text" class="textInput" />
			</div>

			<div class="ctrlHolder">
				<label for="message"><em>*</em> Your Message</label>
				<textarea name="message" id="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
			</div>

			<div class="ctrlHolder">
			<p class="label"><em>*</em> Rate this</p>
				<div class="multiField" id="starify">
					<label for="vote1" class="blockLabel"><input type="radio" name="vote" id="vote1" value="1" /> Poor</label>
					<label for="vote2" class="blockLabel"><input type="radio" name="vote" id="vote2" value="2" /> Fair</label>
					<label for="vote3" class="blockLabel"><input type="radio" name="vote" id="vote3" value="3" /> Average</label>
					<label for="vote4" class="blockLabel"><input type="radio" name="vote" id="vote4" value="4" /> Good</label>
					<label for="vote5" class="blockLabel"><input type="radio" name="vote" id="vote5" value="5" /> Excellent</label>
				</div>
				<p class="formHint">Note: Canceling the vote disables corresponding hidden input element so it won't be submitted. As of v3.0.0 you can use flag <strong>disableValue: false</strong> to prevent this behaviour and keep the Cancel value in POST data.</p>
			</div>

			<div class="buttonHolder">
				<a href="#" class="resetButton" onclick="document.forms[0].reset()">Reset</a>
				<button type="submit" class="primaryAction">Submit</button>
			</div>

		</fieldset>
		
	</form>


</body>
</html>
